<template>
  <!-- 主容器 -->
  <div id="all" class="viewmiddle_3 dark_bgcolor2">
    <!-- 内容区域 -->
    <div id="nierong">
      <!-- 标题 -->
      <div>
        <h4>自动对轴</h4>
      </div>
      <!-- 描述文字 -->
      <el-text>输入原音视频加文案,一键生成字幕文件</el-text>
      <!-- 分割线 -->
      <el-divider />

      <!-- 主要内容容器 -->
      <div class="container">
        <!-- 左侧内容 -->
        <div class="left">
          <!-- 音视频文件输入 -->
          <el-input 
            v-model="input1" 
            class="h50" 
            placeholder="点击上传音视频文件" 
            :suffix-icon="FolderOpened"
            @click="handleFileClick('video')"
          />
          <el-text>支持常用音视频格式，推荐使用：MP3、WAV、M4A、MP4、MOV、RMVB、3GP</el-text>

          <!-- 文本文件输入 -->
          <div class="margin_top20">导入文本文件，或粘贴文案</div>
          <el-text>请上传或输入和视频对应的文案，格式为txt/doc/docx格式，文件大小限制20M内</el-text>
          <el-input 
            v-model="input2" 
            class="h50" 
            placeholder="点击上传文本文件" 
            :suffix-icon="FolderOpened"
            @click="handleFileClick('text')"
          />

          <!-- 一键格式化按钮 -->
          <div class="margin_top20">
            <el-row :gutter="20">
              <el-col :span="4">
                <el-button type="primary" @click="formatText">一键格式化</el-button>
              </el-col>
              <el-col :span="16" class="margin_top5">
                点击一键格式化，自动按符号换行，切分成一句一段格式
              </el-col>
            </el-row>
          </div>

          <!-- 文本输入框 -->
          <div>
            <textarea 
              v-model="textarea1" 
              class="dark_bgcolor qsxtext" 
              maxlength="8000" 
              placeholder="在此处输入或粘贴文案"
            ></textarea>
          </div>

          <!-- 自动对轴按钮 -->
          <div>
            <el-row :gutter="20">
              <el-col :span="20"></el-col>
              <el-col :span="4" class="margin_top5">
                <el-button type="primary" @click="alignSubtitles">自动对轴</el-button>
              </el-col>
            </el-row>
          </div>
        </div>

        <!-- 右侧内容 -->
        <div class="right">
          <div style="border: 1px slategrey dashed; height: 410px;">
            <el-scrollbar height="400px">
              <p v-for="item in items" :key="item.id" class="scrollbar-demo-item">{{ item.name }}</p>
            </el-scrollbar>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { FolderOpened, Search } from '@element-plus/icons-vue'

// 响应式变量，用于绑定输入框的值
const input1 = ref('') // 音视频文件输入框
const input2 = ref('') // 文本文件输入框
const textarea1 = ref('') // 文本输入框

// 生成的字幕项
const items = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' },
  { id: 4, name: 'Item 4' },
  { id: 5, name: 'Item 5' },
  { id: 6, name: 'Item 6' },
  { id: 7, name: 'Item 7' },
  { id: 8, name: 'Item 8' },
  { id: 9, name: 'Item 9' },
  { id: 10, name: 'Item 10' },
  { id: 11, name: 'Item 11' },
]);

// 处理文件点击
const handleFileClick = (type: string) => {
  const fileInput = document.createElement('input');
  fileInput.type = 'file';
  fileInput.accept = type === 'video' ? 'audio/*, video/*' : '.txt, .doc, .docx';
  fileInput.onchange = (event) => {
    const file = (event.target as HTMLInputElement).files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const content = e.target?.result as string;
        if (type === 'video') {
          input1.value = content;
        } else {
          input2.value = content;
          textarea1.value = content;
        }
      };
      reader.readAsText(file);
    }
  };
  fileInput.click();
};

// 一键格式化函数
const formatText = () => {
  textarea1.value = textarea1.value.split('. ').join('.\n');
}

// 自动对轴函数
const alignSubtitles = () => {
  if (!textarea1.value) {
    ElMessage.error('请输入或粘贴文案');
    return;
  }
  items.value = textarea1.value.split('\n').map((text, index) => ({
    id: index + 1,
    name: text
  }));
}
</script>

<style scoped>
/* 滚动条项样式 */
.scrollbar-demo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

/* 内容区域的样式 */
#nierong {
  padding: 20px 40px;
}

/* 主容器样式 */
.viewmiddle_3 {
  border-radius: 10px; /* 设置圆角 */
  margin-top: 50px; /* 设置上外边距 */
  width: 100%; /* 设置宽度为100% */
  height: 100%; /* 设置高度 */
  background-color: #f0f2f5; /* 背景颜色 */
}

/* 主要内容容器样式 */
.container {
  display: flex;
  justify-content: space-between; /* 水平对齐方式 */
  align-items: stretch; /* 垂直对齐方式，默认拉伸 */
  width: 100%; /* 父容器的宽度 */
  height: 100%; /* 父容器的高度 */
}

/* 左右两侧内容样式 */
.left,
.right {
  flex: 1; /* 每个子元素占据相等的空间 */
  box-sizing: border-box; /* 包括内边距和边框在内的总宽度 */
  padding: 0px 30px; /* 内边距 */
}

/* 文本输入框样式 */
.qsxtext {
  width: 100%; /* 设置宽度为100% */
  height: 230px; /* 设置高度 */
  margin-top: 10px; /* 设置上外边距 */
  resize: none; /* 禁止用户调整大小 */
  background-color: #2c3e50; /* 背景颜色 */
  color: #ecf0f1; /* 文字颜色 */
  border: 1px solid #34495e; /* 边框颜色 */
  border-radius: 5px; /* 圆角 */
  padding: 10px; /* 内边距 */
}

/* 输入框样式 */
.h50 {
  height: 50px;
  margin-top: 10px;
}

/* 边距样式 */
.margin_top20 {
  margin-top: 20px;
}

.margin_top5 {
  margin-top: 5px;
}
</style>